<template>
    <div class="search-box">
      <input 
        type="text" 
        placeholder="请输入城市名称"
        v-model="searchQuery"
        @input="handleSearchInput"
        @focus="showSearchResults = true"
      >
      <ul v-show="showSearchResults && (cityList.length > 0 || searchError || networkError)">
        <li 
          v-for="(city, index) in cityList"
          :key="index"
          @click="selectCity(city)"
        >
          {{ city.name }}
        </li>
        <p v-if="searchError">似乎没有找到你查找的城市</p>
        <p v-if="networkError">网络异常，请稍后重试</p>
      </ul>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { searchCity } from '@/api/weatherApi'
  
  const router = useRouter();
  
  // 响应式数据
  const searchQuery = ref('');
  //控制搜索结果
  const cityList = ref([]);
  
  const searchError = ref(false);
  //控制网络异常
  const networkError = ref(false);
  //控制搜索结果显示
  const showSearchResults = ref(false);

  
  // 防抖处理
  let timeoutId;
  const handleSearchInput = () => {
    clearTimeout(timeoutId);
    showSearchResults.value = true;
    
    timeoutId = setTimeout(async () => {
      if (searchQuery.value.trim()) {
        try {
          const res = await searchCity(searchQuery.value.trim());
          if (res && Array.isArray(res)) {
            cityList.value = res.map(item => ({
              name: item.name || item.cityname || item.districtname || '未知城市',
              adcode: item.adcode || item.citycode || '未知代码'
            }));
            searchError.value = cityList.value.length === 0;
          } else {
            cityList.value = [];
            searchError.value = true;
          }
          networkError.value = false;
        } catch (error) {
          console.error('搜索出错:', error);
          networkError.value = true;
          searchError.value = false;
          cityList.value = [];
        }
      } else {
        cityList.value = [];
        searchError.value = false;
        networkError.value = false;
      }
    }, 500);
  };
  
  // 城市选择处理
  const selectCity = (city) => {
    router.push({
      name: 'CityView',
      params: { adcode: city.adcode }
    });
    showSearchResults.value = false;
    searchQuery.value = '';
  };
  </script>
  
  <style lang="scss" scoped>
  .search-box {
    margin: 2rem 0;
  
    input {
      width: 100%;
      padding: 0.75rem 0;
      background-color: transparent;
      border: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.947);
      color: white;
      font-size: 1rem;
      outline: none;
  
      &::placeholder {
        color: rgba(255, 255, 255, 0.827);
      }
      &:focus {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
        border-bottom: 0;
      }
    }
  
    ul {
      display: block;
      list-style: none;
      margin: 0;
      padding: 8px 4px;
      background-color: #004e71;
      width: 100%;
      border-radius: 0 0 4px 4px;
      color: white;
      z-index: 10;
      
      p {
        display: none;
        padding: 8px 0;
        margin: 0;
        color: rgba(255, 255, 255, 0.85);
      }
      
      li {
        padding: 8px 0;
        cursor: pointer;
        
        &:hover {
          background-color: rgba(255, 255, 255, 0.1);
        }
      }
    }
  }
  </style>